<template>
	<view style="width: 100%;height: 100vh;color: white;" class="flex_column">
		<!-- 首页 -->
		<page-head></page-head>
		<view style="padding: 2vh;flex:1;" class="flex_col">
			<view class="flex_row_between rem04">
				<view>
					参数配置（v1.0.2）<text style="color: #D8D8D8D8;padding-right: 0.2rem;">|</text>
					<text @click="navigateTo('/pages/update/update')"
						style="color: #44CE7B;letter-spacing: 0;border-bottom: 1px solid  #44CE7B;font-weight: 400;">关于我们</text>
				</view>
				<view style="">
					产品型号：{{typeTxt}}</view>
			</view>
			<view class="set-con " style="flex:1;">
				<view class="set-cont rem04" style="flex:1">
					<view style="width:50vh;height: 7vh;z-index: 100;">
						<!-- 店员输入框 -->
						<view class="alignCenter m-b-2">
							<view class="input-con" style="height: 7vh;flex: 1;">
								<input class="rem03" style="flex: 1;padding-left: 1vh;" :value="name"
									placeholder-style="color: #FFFFFF;opacity: 0.3;" />
								<!-- <picker selector-type="select" @change="bindPickerChange" :value="index" :range="nameArr"> -->
								<view class="alignCenter" style="width: 3vh;height: 3vh;"
									@click="showNameArr=!showNameArr">
									<image src="../../image/txxx/xiala.png" style="height: 1.5vh;" mode="heightFix">
									</image>
								</view>
								<!-- </picker> -->
							</view>
						</view>
						<!-- 选框列表 -->
						<scroll-view scroll-y class="list-con rem03" v-if="showNameArr">
							<view v-for="item in nameArr" :key="item" class="m-b-1" @click="name_click(item)">
								{{item}}
							</view>
						</scroll-view>
					</view>
					<view class="alignCenter" style="width:50vh;margin-top: 4vh;z-index: 1;">
						<view class="input-con" style="height: 7vh;flex: 1;">
							<input class="rem03" style="flex: 1;padding-left: 1vh;" type="password" placeholder="请输入密码"
                     placeholder-style="color: #FFFFFF;opacity: 0.3;"/>
						</view>
					</view>
					<view class="alignCenter" style="width:50vh;margin-top: 8vh;">
						<button style="background: #646B97;border-radius: 2vh;width: 100%;" type="primary"
							@click="navigateTo('/pages/checkManage/checkManage')">
							<view class="alignCenter " style="padding: 0.5vh;justify-content: center;">
								<image src="../../image/icon/suo.png" style="width: 2vh;" mode="widthFix"></image>
								<view style="padding-left: 2vh;">进入高级设置</view>

							</view>
						</button>
					</view>
				</view>
				<view class="set-btn-con">
					<view style="padding: 0;">
						<button style="background: #646B97;border-radius: 2vh;width: 30vh;" type="primary"
							@click="back_click">
							<view style="padding: 0.5vh;">取消</view>
						</button>
					</view>
					<view style="padding: 0 2vh;">
						<button style="background: #44CE7B;border-radius: 2vh;width: 30vh;" @click="save_click()">
							<view style="padding: 0.5vh;">保存</view>
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				btnArr: ["YL-8系", "YL-6系", "YL-4系"],
				typeTxt: "",
				open: true,
				name: '店员1',
				nameArr: ['店员1', '店员2', ],
				showNameArr: false,
				// index:0
			}
		},
    mounted() {
      //连接websoket
    },
    onShow: function() {
			this.typeTxt = this.btnArr[getApp().globalData.type];

			// console.log(getApp().globalData.type)
		},
		methods: {
			initWebSocket: function() {
				const wsuri = 'ws://10.20.52.236:9530/Api/ws'
				this.websock = new WebSocket(wsuri)

			},

			name_click(name) {
				this.name = name;
				this.showNameArr = false;
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				// this.index = e.target.value
				this.name = this.nameArr[e.target.value];
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			back_click(){
        uni.navigateBack({delta: 1})
			},
      save_click(){
        var data={
          username:this.name,
          password:this.password
        }
        // this.websock.addEventListener('open',function(){
        //   console.log(this.name,this.password)
        // })
        //本地先保存这个数据
        uni.setStorage({
          key:'set_login_data',
          data:{
            data:data
          }
        })
        uni.showToast({
          title:'保存成功',
          icon:'success'
        })
      }
			
		}
	}
</script>

<style>
	page {
		background: #1E2238;
	}

	.set-con {
		opacity: 0.98;
		background: #3E4469;
		border-radius: 2vh;
		margin-top: 5vh;
		display: flex;
		flex-direction: column;
		margin-bottom: 10vh;
	}

	.set-cont {
		background: #4A5079;
		border-radius: 2vh 2vh 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* padding-right: 10vh; */
	}

	.set-cont-title {
		padding-right: 3vh;
		width: 20vh;
		text-align: right;
	}

	.input-con {
		background: #646B97;
		border-radius: 2vh;
		height: 30px;
		display: flex;
		align-items: center;
		padding: 0 0.2rem;
	}

	.list-con {
		background: #646B97;
		border-radius: 2vh;
		padding: 1.5vh 2vh;
		width: 47vh;
		height: 27vh;
	}

	.open-con {
		background: #000;
		border-radius: 2vh;
		height: 0.8rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.08rem;
	}

	.open-btn {
		background: #646B97;
		border-radius: 2vh;
		height: 7.5vh;
		width: 15vh;
		flex: 1;
		justify-content: center;
		display: flex;
		align-items: center;
	}

	.dian {
		width: 0.2rem;
		height: 0.2rem;
		background: #fff;
		border-radius: 0.1rem;
		margin-right: 2.5vh;
	}

	.set-btn-con {
		padding: 2vh 10vh;
		display: flex;
		justify-content: center;
	}

	.input::-webkit-input-placeholder {
		font-size: 3vh;
	}
</style>
